<template functional>
    <SubMenu
            :key="props.menuInfo.id"
    >
    <span slot="title">
      <Icon type="mail" /><span>{{ props.menuInfo.name }}</span>
    </span>
        <template v-for="item in props.menuInfo.children">
            <Item  v-if="!item.children"
                    :key="item.id"
            >
                <Icon type="pie-chart" />
                <span>{{ item.name }}</span>
            </Item>
            <subb-menu v-else
                    :key="item.id"
                    :menu-info="item"
            />
        </template>
    </SubMenu>
</template>
<script>
    import {Menu, Icon} from 'ant-design-vue';
    const {SubMenu, Item} = Menu;

    export default {
        name: 'subb-menu',
        props: ['menuInfo'],
        components: {
            Item,
            SubMenu,
            Icon
        }
    };
</script>
